<template>
    <div class="activity">
        <div class="activity-content">
            <el-carousel height="300px">
                <el-carousel-item>
                    <img style="width:100%" src="../../assets/images/daxin/banner1.jpg" alt />
                </el-carousel-item>
            </el-carousel>
            <ul
                class="activity-list"
                v-infinite-scroll="load"
                style="overflow:auto"
                v-loading="listLoding"
            >
                <li v-for="(v,i) in list" :key="i" class="activity-list-detail" @click="clickTo(v)">
                    <div>
                        <img :src="v.showImg" alt />
                    </div>
                    <img
                        v-if="v.purchaseStatus==0?true:false"
                        class="label"
                        src="../../assets/images/daxin/yure.png"
                        alt
                    />
                    <img
                        v-if="v.purchaseStatus==1?true:false"
                        class="label"
                        src="../../assets/images/daxin/shengou.png"
                        alt
                    />
                    <img
                        v-if="v.purchaseStatus==2?true:false"
                        class="label"
                        src="../../assets/images/daxin/yaohao.png"
                        alt
                    />
                    <img
                        v-if="v.purchaseStatus==3?true:false"
                        class="label"
                        src="../../assets/images/daxin/wancheng.png"
                        alt
                    />
                    <img
                        v-if="v.purchaseStatus==4?true:false"
                        class="label"
                        src="../../assets/images/daxin/jiezhi.png"
                        alt
                    />
                    <div>
                        <p>{{v.projectName}}</p>
                        <p>{{v.projectDescription}}</p>
                    </div>
                    <div>
                        <div>
                            <span>{{$t('message.sales')}}</span>
                            <span>{{v.totalSalesAmount}} TOKEN</span>
                        </div>
                        <div>
                            <span>{{$t('message.endoftime')}}</span>
                            <span>{{v.purchaseEndTime}}</span>
                        </div>
                    </div>
                </li>
                <p class="showBTn" v-show="more">{{$t('message.load')}}</p>
                <p class="showBTn" v-show="noMore">{{$t('message.more')}}</p>
            </ul>
            
            
        </div>
    </div>
</template>
<script>
// import { makeNewSettingList } from "../../api/api";
export default {
    data() {
        return {
            listLoding: false,
            list: [],
            pages: 1,
            more:false,
            noMore:true
        };
    },
    created() {
        this.getList();
    },
    methods: {
        load() {
            this.pages ++;
            //console.log(this.pages);
            this.getList();
        },
        getList() {
            var params = {
                page:this.pages,
                rows:6,
            }
            makeNewSettingList(params).then(res => {
                //console.log(res.data);
                if (res.data.code == 200) {
                    this.more = false
                    if(res.data.data.length<=0){
                        this.noMore = true
                    }
                    res.data.data.forEach(item => {
                        // this.list.push(item)
                        if(item.id == "1199515059466801152" || item.id == "1189474141355380736"){
                            this.list.push(item)
                        }
                    });
                } else {
                    this.$message({
                        message: res.data.msg
                    });
                }
            });
        },
        clickTo(v) {
            this.$router.push({
                path: "/content",
                query: {
                    id: v.id,
                    status: v.purchaseStatus,
                    virtualWalletId: v.virtualWalletId,
                    virtualWalletName: v.virtualWalletName
                }
            });
        }
    }
};
</script>
<style lang="less" scoped>
.showBTn{
    text-align: center;
    padding: 0 0 20px 0;
    font-size: 14px;
    color: #999;
}
.activity {
    background: #fff;
    .activity-content {
        padding: 10px 0 0;
        margin: 0 auto;
        width: 1200px;
        .activity-list::-webkit-scrollbar{
            display: none
        }
        .activity-list {
            width: 100%;
            max-height: 800px;
            margin-top: 30px;
            .activity-list-detail {
                display: inline-block;
                border: 1px solid #eee;
                width: 30%;
                margin-bottom: 30px;
                margin-right: 5%;
            }
            .activity-list-detail:nth-of-type(3n) {
                margin-right: 0;
            }
            .activity-list-detail {
                position: relative;
                cursor: pointer;
                margin-bottom: 30px;
                > div:first-child {
                    height: 200px;
                    overflow: hidden;
                    display: flex;
                    justify-content: center;
                    align-content: center;
                }
                .label {
                    position: absolute;
                    right: 0;
                    top: 20px;
                    width: 100px;
                }
                > div:nth-child(3) {
                    padding: 20px;
                    box-sizing: border-box;
                    border-bottom: 1px solid #eee;
                    p {
                        font-size: 18px;
                        font-weight: bold;
                        color: #2d2f56;
                    }
                    p:last-child {
                        font-size: 14px;
                        margin-top: 10px;
                        font-weight: normal;
                    }
                }
                > div:nth-child(4) {
                    padding: 20px;
                    box-sizing: border-box;
                    > div {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        color: #bac5cb;
                        margin-bottom: 15px;
                        span:last-child {
                            color: #2d2f56;
                        }
                    }
                    > div:last-child {
                        margin-bottom: 0;
                    }
                }
            }
        }
    }
}
</style>